<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广东联通在线客服</title>
<link type="text/css" rel="stylesheet" href="css/base.css" />
<!--[if IE 6]>
<style type="text/css">
.right_con {
	_right:-1px;
}
</style>
<![endif]-->
</head>
<body onLoad="setSize();" onResize="setSize();">
<div class="ie6-out"><div class="ie6-in"><div id="min-width"><!--for min-width-->
    <div class="pack" id="pack">
        <div style="position:relative; right:0;">
            <div class="icon_function">
                <a href="#" class="icon_small"><span>&nbsp;&nbsp;&nbsp;</span></a>
                <a href="#" class="icon_large"><span>&nbsp;&nbsp;&nbsp;</span></a>
                <a href="#" class="icon_close"><span>&nbsp;&nbsp;&nbsp;</span></a>
            </div>
        </div><!--the tiptop layer,funtion icon put in here-->
        <div class="pack_top">
            <div class="pack_top_left"></div>
            <div class="pack_top_right"></div>
        </div><!--pack_top-->
        <div class="pack_mid" id="pack_mid">
            <div class="pack_mid_left"></div>
            <div class="pack_mid_right"></div>
            <div class="pack_con" id="pack_con">
                <div class="logo"><img src="images/logo.jpg" width="187" height="38" title="广东联通在线客服" align="广东联通在线客服"  /></div>
                <div class="man" id="man">
                    <div class="man_single" id="man_0" onClick="javascript:changeMan(6,0);"><div class="man_single_con" id="manCon_0">18668668680</div><div class="man_close" id="manClo_0"></div></div>
                    <div class="man_single_act" id="man_1" onClick="javascript:changeMan(6,1);"><div class="man_single_con_act" id="manCon_1">18668668681</div><div class="man_close" style="display:block;" id="manClo_1"></div></div>
                    <div class="man_single" id="man_2" onClick="javascript:changeMan(6,2);"><div class="man_single_con" id="manCon_2">18668668683</div><div class="man_close" id="manClo_2"></div></div>
                    <div class="man_single" id="man_3" onClick="javascript:changeMan(6,3);"><div class="man_single_con" id="manCon_3">18668668686</div><div class="man_close" id="manClo_3"></div></div>
                    <div class="man_single" id="man_4" onClick="javascript:changeMan(6,4);"><div class="man_single_con" id="manCon_4">18668668686</div><div class="man_close" id="manClo_4"></div></div>
                    <div class="man_single" id="man_5" onClick="javascript:changeMan(6,5);"><div class="man_single_con" id="manCon_5">18668668686</div><div class="man_close" id="manClo_5"></div></div>
                </div><!--man-->
                <div class="clear"></div>
                <div class="panel">
                    <div class="shortcut">
                        <div class="shortcut_1"></div><span><a href="#">请求协同</a></span>
                        <div class="shortcut_2"></div><span style="padding-left:3px;"><a href="#">请求转接</a></span>
                    </div>
                </div>
                <div class="clear"></div>
                <!--以下为高度不确定部分-->
                <div class="con" id="con">
                	<!--隐藏的对话记录框部分-->
                    <div style="position:absolute; z-index:110; top:10px; left:170px; display:none;" id="dialog_box">
                        <div class="dialog_box">
                            <div class="icon_function">
                                <a href="#" class="icon_small"><span>&nbsp;&nbsp;&nbsp;</span></a>
                                <a href="#" class="icon_large"><span>&nbsp;&nbsp;&nbsp;</span></a>
                                <a href="#" class="icon_close" onClick="document.getElementById('dialog_box').style.display = 'none';"><span>&nbsp;&nbsp;&nbsp;</span></a>
                            </div>                        
                        	<div class="dia_logo"></div><div class="dia_title">对话记录</div>
                        	<div class="clear"></div>
                            <div style="position:relative; bottom:-2px; padding-left:13px;">
                                <a href="#" class="btn_act" id="record_1" onClick="javascript:changeBg('record_1','record_2');"><span>文字记录</span></a>
                                <a href="#" class="btn_nor" id="record_2" onClick="javascript:changeBg('record_2','record_1');"><span>记录</span></a>
                            </div>
                        	<div class="clear"></div>
                            <div class="panel" style="width:594px; margin:0 2px;">
                                <div class="dia_function">
                                    <div class="icon_save"></div><div class="icon_print"></div>
                                </div>
                            </div>
                        	<div class="clear"></div>
                            <div class="dia_con">
                                <p><span class="green fnormal">18617234212 加入了咨询室</span></p>
                                <p><span class="green fnormal">unicom1 加入了咨询室</span></p>
                                <p><span class="blue fnormal">(14:13)unicom13:</span>欢迎您，很高兴为您服务！</p>
                                <p><span class="blue fnormal">(14:13)unicom13:</span>dad</p>
                                <p><span class="green fnormal">unicom13离开了咨询室</span>
                                <p><span class="green fnormal">18617234212 离开了咨询室</span></p>
                            </div>
                        </div>
                        <script language="javascript">
                        function changeBg(id1,id2) {
                        document.getElementById(id1).className = "btn_act";
                        document.getElementById(id2).className = "btn_nor";
                        }
                        </script>
                    </div>                
					<!--隐藏的对话记录框部分-->
                    <div class="left_con" id="left_con">
                        <div class="man_info" id="man_info">
                            <ul>
                                <li><b>用户号码：18668668686</b></li>
                                <li>用户姓名：拉登</li>
                                <li>用户归属地：广州</li>
                                <li>用户套餐：3G 66元A套餐</li>
                                <li>入网时间：2010年10月11日</li>
                                <li>会员级别：低级</li>
                                <li>服务经理：奥巴马</li>
                                <li>手机型号：iphone4</li>
                                <li>当前状态：正常</li>
                                <li>用户备注：恐怖分子</li>
                                <li>&nbsp;</li>
                            </ul>
                        </div>
                        <div class="bar">
                            <div class="bar_con_left"><span class="bar_title">对话记录</span></div>
                            <div class="bar_con_right" onClick="document.getElementById('dialog_box').style.display = 'block';"><img src="images/icon_more.jpg" width="18" height="27" style="cursor:pointer;" /></div>
                        </div>
                        <div class="clear"></div>
                        <div class="dialog_log" id="dialog_log">
                        <div style="padding-top:5px;">
                            <a href="#">
                            <ul>
                                <li><span>客服：unicom13</span></li>
                                <li><span>持续时间：</span>2分钟</li>
                                <li><span>日期：</span>2011/05/05 下午8:33</li>
                            </ul>
                            </a>
                            <div class="line"></div>
                            <a href="#">
                            <ul style="padding-left:5px;">
                                <li><span>客服：unicom13</span></li>
                                <li><span>持续时间：</span>2分钟</li>
                                <li><span>日期：</span>2011/05/05 下午8:33</li>
                            </ul>
                            </a>
                            <div class="line"></div>                    
                        </div>
                        </div><!--dialog_log-->
                    </div><!--left_con-->
                    <div class="center_con" id="center_con">
                        <div class="win_msg" id="win_msg">
                            <p><span class="green">客服：</span>欢迎您，很高兴为您服务！</p>
                            <p><span class="blue">13710232324：</span>您好！</p>
                        </div>
                        <div class="bar">
                            <div class="bar_con_left" style="position:relative; top:-3px;">
                                <a href="#"><div class="icon_face"></div></a>
                                <a href="#"><div class="icon_forfex"></div></a>
                                <a href="#"><div class="icon_paper"></div></a>
                                <a href="#"><div style="float:left; padding-top:2px;">闪答</div><div class="icon_triangle"></div></a>
                            </div>
                        </div>
                        <div class="win_input">
                            <textarea id="me" style="width:100%; height:97px; overflow:visible; border:none;"></textarea>
                        </div>
                        <div class="bar">
                            <div class="bar_con_right"><a href="#"><div class="icon_send"></div></a></div>
                        </div>
                    </div><!--center_con-->
                    <div class="right_con" id="right_con">
                        <div class="right_con_pack">
                            <div class="bar">
                                <div class="bar_con_left" style="padding-left:10px;">
                                    <div class="bar_title" id="zs" onClick="jacascript:changeFontBg('zs','cy');">知识库</div>
                                    <div class="bar_title red_bg" id="cy" onClick="jacascript:changeFontBg('cy','zs');">常用语</div>
                                </div>
                            </div>
                            <div style="padding-top:8px;_padding-top:10px; position:relative; top:5px;">
                                <div style="float:left; padding-left:10px; padding-right:5px;"><input type="text" style="width:200px; _width:190px; height:23px;" /></div>
                                <div class="btn">搜索</div>
                            </div>
                            <div class="clear" style="height:2px;"></div>
                        </div>
                        <div class="right_con_pack" style="padding-left:10px; padding-top:10px;" id="dropdown_menu">
                            <div class="pdbottom10">
                                <div onClick="javascript:showMenu('menu_0');setSize();"><div class="icon_spread"></div><div class="fleft">广东省</div></div>
                                <div class="clear"></div>
                                <div id="menu_0" class="menu">
                                    <ul>
                                        <li>1、3G费用</li>
                                        <li>2、3G流量计算</li>
                                        <li>3、3G套餐费用</li>
                                    </ul>
                                </div>
                            </div>  
                            <div class="pdbottom10">  
                                <div onClick="javascript:showMenu('menu_1');setSize();"><div class="icon_spread"></div><div class="fleft">广州市</div></div>
                                <div class="clear"></div>
                                <div id="menu_1" class="menu">
                                    <ul>
                                        <li>1、3G费用</li>
                                        <li>2、3G流量计算</li>
                                        <li>3、3G套餐费用</li>
                                    </ul>
                                </div>
                            </div>    
                        </div>
                        <div class="right_con_pack" style="padding:10px 0 10px 10px; overflow:hidden;" id="detail">
                            here you can set down the detail
                        </div>
                    </div><!--right_con-->
                </div><!--con-->
            </div><!--pack_con-->
        </div><!--pack_mid-->
        <div class="clear"></div>
        <div class="pack_bottom">
            <div class="pack_bottom_left"></div>
            <div class="pack_bottom_right"></div>
        </div><!--pack_bottom-->
    </div><!--pack-->
</div></div></div> 
   
<script language="javascript" type="text/javascript">
var winWidth=0;
var winHeight=0;
function findDimensions() //函数：获取尺寸
{
	//获取窗口宽度
	if(window.innerWidth)
		winWidth=window.innerWidth;
	else if((document.body)&&(document.body.clientWidth))
		winWidth=document.body.clientWidth;
	//获取窗口高度
	if(window.innerHeight)
		winHeight=window.innerHeight;
	else if((document.body)&&(document.body.clientHeight))
		winHeight=document.body.clientHeight;
	/*nasty hack to deal with doctype swith in IE*/
	//通过深入Document内部对body进行检测，获取窗口大小
	if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
		winHeight=document.documentElement.clientHeight;
		winWidth=document.documentElement.clientWidth;
	}
}

function setSize() {
	findDimensions();
	
	document.getElementById("pack_mid").style.height = winHeight - 30 + "px";
	//ie 与 firefox 区别处理
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {   
		var conHeight = winHeight - document.getElementById("man").scrollHeight - 168;//求得114
		if(conHeight < 250) {
			conHeight = 250;
			document.getElementById("pack_mid").style.height = 385 + "px";
		}
		document.getElementById("con").style.height = conHeight + "px";
		document.getElementById("detail").style.height = conHeight - document.getElementById("dropdown_menu").scrollHeight - 95 + "px";
		document.getElementById("dialog_log").style.height = conHeight - 6 - document.getElementById("man_info").scrollHeight + "px"; //获取对话记录高度
		document.getElementById("win_msg").style.height = conHeight - 154 + "px";
		
		if(winWidth>901)
			if(conHeight > 250)
				document.getElementById("center_con").style.width = winWidth - 524 + "px";//the min-width of center_con is 360px
			else
				document.getElementById("center_con").style.width = winWidth - 544 + "px";
		else {
			document.getElementById("center_con").style.width = 394 + "px";
		}		
    }
	else {
		var conHeight = winHeight - document.getElementById("man").scrollHeight - 118;//求得114
		if(conHeight < 250) {
			conHeight = 250;
			document.getElementById("pack_mid").style.height = 366 + "px";
		}
		document.getElementById("con").style.height = conHeight + "px";
		var menuHeight = document.getElementById("dropdown_menu").scrollHeight;
		if(conHeight - menuHeight > 95)
			document.getElementById("detail").style.height = conHeight - document.getElementById("dropdown_menu").scrollHeight - 95 + "px";
		else 
			document.getElementById("detail").style.height = 0 + "px";
		document.getElementById("dialog_log").style.height = conHeight - document.getElementById("man_info").scrollHeight + "px"; //获取对话记录高度
		document.getElementById("win_msg").style.height = conHeight - 154 + "px";
		
		if(winWidth>901)
		document.getElementById("center_con").style.width = winWidth - 524 + "px";//the min-width of center_con is 360px
		else {
			document.getElementById("center_con").style.width = 378 + "px";
		}
	}
}

function changeMan(k,t) {
	for(i=0;i<k;i++) {
		var man = "man_" + i;
		var manCon = "manCon_" + i;
		var manClo = "manClo_" + i;
		document.getElementById(man).className = "man_single";
		document.getElementById(manCon).className = "man_single_con";
		document.getElementById(manClo).style.display = "none";
	}
	var manAct = "man_" + t;
	var manActCo = "manCon_" + t;
	var manActCl = "manClo_" + t;
	document.getElementById(manAct).className = "man_single_act";
	document.getElementById(manActCo).className = "man_single_con_act";
	document.getElementById(manActCl).style.display = "block";
}

function changeFontBg(k,t) {
	document.getElementById(k).className="bar_title red_bg";
	document.getElementById(t).className="bar_title";
}

function showMenu(id) {
    if (document.getElementById(id).style.display == "none"){
       document.getElementById(id).style.display = "block";
    }else{
       document.getElementById(id).style.display = "none";
   }	
}
</script>
</body>
</html>
